<template>
	<view class="content">
		<view style="margin-top: 25px;  background-color:transparent;"></view>
		<view class="outside">
			<view class="loginLog">
				<image src="../../static/icon/logo.png" mode="widthFix"></image>
			</view>
		</view>
		<view style="text-align: center;font-size: 45rpx;">
			中海油高技能人才培训系统
		</view>
		<view class="form">
			  <view class="inputwrapper">
				    <input class="input1"  v-model="usn1"  placeholder="请输入学号" />
			  </view>
			  <view class="inputwrapper">
			  		<input class="input2" type="password" v-model="pwd1" placeholder="请输入密码" />
			  </view>
			  <view class="loginbtn" @click="open">
			  	  <text @click="open">登录</text>
				  
				  <uni-popup ref="popfalse" :mask-click="false" type="bottom">
				  	<view style="margin-top: 60%;">
				  		<view class="checkchoices">
				  			账号或密码错误，请重新填写
				  		</view>
				  		  <button @click="close" style="width: 80%;border-radius: 0px;color: #0000FF;">确定</button>
				  	</view>
					
				  </uni-popup>
				  
				  <uni-popup ref="popup" type="bottom">登录成功</uni-popup>
				  
				  
				  <uni-popup ref="popnull" type="bottom">
					  登录失败，请输入用户名和密码
					  <button type="default">123</button>
					  </uni-popup>
			  </view>
		</view>
	</view>
	
</template>

<script>
	export default {
		data() {
			return {
			   usn:'dpcq',
			   pwd:'123',
			   usn1:'',
			   pwd1:''	
			}
			},
			mounted() 
			{
				uni.removeStorageSync('token')
			},
			methods:
			{
				reachTO () 
				{   
					if (this.usn == this.usn1&&this.pwd == this.pwd1)
					 this.$refs.popup.open('top')
					console.log(123)
					
				},
				close() {
				    this.$refs.popfalse.close()
				},
				open(){
					if (this.usn1.trim().length === 0 || this.pwd1.trim().length === 0) {
						uni.showToast({
							title: '学号密码不能为空！',
							icon: 'none'
							
						})
					} else {
						uni.request({
							url: 'http://exam.tutestudio.net/api/student/login',
							method: 'POST',
							data: {
								studentNo: this.usn1,
								password: this.pwd1
							},
							success(res) {
								console.log(res)
								if(res.data.statusCode !== 200) {
									uni.showToast({
										title: res.data.errors,
										icon: 'none'
									})
									return;
								}
								uni.setStorageSync(
									'token',
									res.data.data.accessToken
								)
								uni.setStorageSync(
									'name',
									res.data.data.name
								)
								uni.navigateTo({
									url: `/pages/index/index`
								})
								this.usn1 = ''
								this.pwd1 = ''
							},
							fail(err) {
								uni.showToast({
									title: '接口参数有误！',
									icon: 'none'
								})
							}
						})
					}
				}
					  
			}
		}
	
</script>

<style lang="scss">
	.content {
		height: 400upx;
		background-color: white;
		width: 100vw;
		height: 100vh;
		overflow: hidden;
	}
	.upToSubmit1{
		 display: block;
		 width: 100%;
		 height: 200px;
		 color: black;
		 margin: 0 auto;
		 background-color: white;
		 margin-top: 200px;
	}
	.outside{
		height: 30vh;
		width: 100vw;
		display: flex;
		justify-content: center;
		align-items: flex-end;
	}
	.checkchoices{
		background-color: white;
		margin:0 auto;
		width: 80%;
		height:120px;
		text-align: center;
		line-height: 120px;
	}
	.loginLog{
		width: 150px;
	}
	.loginLog image{
		width: 100%;
	}
	.form {
		padding: 0 100upx;
		margin-top:50px ;
	}
	.inputwrapper{
		width: 100%;
		height: 80upx;
		border-bottom: 1px solid rgba(1,1,1,0.3);opacity: 0.8;
		background-color: white;
		border-radius:5px;
		box-sizing: border-box;
		padding: 0;
		margin-top: 25px;
	}
	.input1{
		width: 100%;
		height: 100%;
		text-align: center;
		background:url(../../static/icon/student.png) no-repeat 5%;
		background-position: left;
		background-size: 25px;
	}
	.input2{
		width: 100%;
		height: 100%;
		text-align: center;
		background:url(../../static/img/pass.png) no-repeat 5%;
		background-position: left;
		background-size: 25px;
	}
	.loginbtn{
		margin-top:60upx ;
		width: 100%;
		height: 80upx;
		background-color:#3C86FD;
		border-radius:10px ;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.loginbtn text
	{    
		display: block;
		color: white;
		font-weight: bolder;
		font-size: 20px;
		 line-height: 100%;
	}

</style>
